import React, { Component } from 'react'
import reactDom from 'react-dom';

// class Demo extends Component {
//     state={he:0}
//     jia=()=>{
//         this.setState({he:this.state.he+1})
//     }
//     myref=React.createRef()
//     show = ()=>{
//       console.log(this.myref.current.value)
      
//     }
//     // componentDidMount(){
//     //     //定时器
//     //     this.dsq=setInterval(() => {
//     //         this.setState(state=>({he:this.state.he+1}))
//     //     }, 1000);
//     // }
//     xz=()=>{
//         reactDom.unmountComponentAtNode(document.getElementById('root'))
//     }
//     componentWillUnmount(){
//       clearInterval(this.dsq)
//     }
//     render() {
//         return (
//             <div>
//                 <h2>和：{this.state.he}</h2>
//                 <button onClick={this.jia}>jia</button>
//                 <button onClick={this.xz}>限载组件</button>
//                 <input type='text' ref={this.myref}/>
//                 <button onClick={this.show}>shuj</button>
//             </div>
//         )
//     }
// }
function Demo(){
   const [qian,hou]= React.useState(0)
   const myref=React.useRef()
   React.useEffect(()=>{//=componentDidMount
    let dsq=setInterval(() => {
    //hou(qian=> qian+1)
                }, 1000);
     return ()=>{//=componentWillUnmount
       clearInterval(dsq)
     }
   },[])//有数组就是会监测，如果没有就是全监测，数组有谁监测谁
   function jia(){
       //hou(qian+1)
       hou(qian=> qian+1)//函数简写
   }
   function xz(){
    reactDom.unmountComponentAtNode(document.getElementById('root'))
   }
   function show(){
    console.log(myref.current.value)
   }
    return(
        <div>
                 <h2>和：{qian}</h2>
                 <button onClick={jia}>jia1</button>
                 <button onClick={xz}>限载组件</button>
                 <input type='text' ref={myref}/>
                 <button onClick={show}>shuj</button>
             </div>
    )
}
export default Demo